<template>
    <div class="bubble-bg">
        <div
                v-for="(bubble, index) in bubbles"
                :key="index"
                class="bubble"
                :style="{
        '--size': bubble.size + 'px',
        '--left': bubble.left + '%',
        '--speed': bubble.speed + 's',
        '--delay': bubble.delay + 's',
        '--opacity': bubble.opacity
      }"
        ></div>
    </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';

const bubbles = ref([]);

// 生成随机气泡
const generateBubbles = () => {
    const bubbleCount = 30; // 气泡数量
    const newBubbles = [];

    for (let i = 0; i < bubbleCount; i++) {
        newBubbles.push({
            size: Math.random() * 40 + 10,       // 10-40px大小
            left: Math.random() * 100,           // 水平随机分布
            speed: Math.random() * 15 + 10,      // 10-25秒上升速度
            delay: Math.random() * -20,          // 动画延迟
            opacity: Math.random() * 0.4 + 0.3    // 30%-70%透明度
        });
    }

    bubbles.value = newBubbles;
};

onMounted(generateBubbles);
</script>

<style scoped>
.bubble-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    overflow: hidden;
    background: linear-gradient(to bottom, #bbe8ff, #f1e9ff);
}

.bubble {
    position: absolute;
    bottom: -50px;
    left: var(--left);
    width: var(--size);
    height: var(--size);
    background: rgba(150, 220, 255, var(--opacity));
    border-radius: 50%;
    filter: blur(2px);
    animation: rise var(--speed) infinite ease-in;
    animation-delay: var(--delay);
}

@keyframes rise {
    0% {
        transform: translateY(0) scale(0.8);
        opacity: 0;
    }
    20% {
        opacity: var(--opacity);
    }
    100% {
        transform: translateY(calc(-100vh - var(--size))) scale(1.2);
        opacity: 0;
    }
}
</style>